@use "sass:map";

.blessings-picker-root {
	.blessings-picker-row {
		display: flex;
		justify-content: space-between;

		&:not(:last-child) {
			margin-bottom: map.get($spacers, 1);
		}

		.blessings-picker-spec {
			margin-right: $block-spacer * 2;

			.blessings-spec-icon {
				width: $icon-size-md;
				height: $icon-size-md;
			}
		}

		.blessings-picker-container {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-column-gap: map.get($spacers, 1);

			.blessing-picker {
				&:not(.disabled) .icon-picker-button {
					filter: none !important;
				}

				&> .icon-picker-button:not(.active) {
					filter: grayscale(1);
				}
			}
		}
	}
}
